iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
3
Modern Web

重新認識 CSS系列 第 14

重新認識 CSS - Box model (前傳)

  • 分享至 

  • xImage
  •  

今天來介紹 CSS 的 Box model。

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於:

在佈局 document 時,UA 的渲染引擎會根據 CSS box model 將每個元素表示為一個矩形框 (rectangular box)。CSS 會確定這些 box 的大小、位置和屬性 (顏色、背景、border 大小...等)。

每個 box 都是由下面這四個區域 (area) 所組成:

  • content area (例如:文字、圖片 ... 等)
  • padding area
  • border area
  • margin area

這些區域 (area) 都是由各邊緣 (edge) 所定義:

  • content edge
  • padding edge
  • border edge
  • margin edge

如下圖:

圖片來源:CSS Box Model Module Level 3

用 Chrome DevTools (開發者工具) 也可以看到 box model:

上圖中的各種顏色由外而內分別為:

  • 白色:position (與 box model 無關,之後會介紹此部份)
  • 橘色:margin
  • 黃色:border
  • 綠色:padding
  • 藍色:content

margin、border 和 padding 可分為 top、right、bottom 和 left 四個部份,可用各自的 CSS 屬性來設定,語法都很類似。

如果要各別指定上下左右,下面以 padding 的語法為例:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

如果要同時設定多個部份,可以使用簡寫屬性來設定,語法如下:

屬性: 上下左右;
屬性: 上下 左右;
屬性: 上 左右 下;
屬性: 上 右 下 左;

下面以 padding 這個簡寫屬性為例,只在此簡寫屬性指定 1 個屬性值時,代表同時指定 padding 的上下左右部份,例如:

padding: 10px;

等同於:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

如果在簡寫屬性指定 2 個屬性值時,代表分別指定 padding 的上下、左右部份,例如:

padding: 10px 20px;

等同於:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

如果在簡寫屬性指定 3 個屬性值時,代表分別指定 padding 的上、左右和下部份,例如:

padding: 10px 20px 30px;

等同於:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

如果在簡寫屬性指定 4 個屬性值時,代表分別指定 padding 的上、右、下、左部份 (以順時針的方向思考會比較好記憶),例如:

padding: 10px 20px 30px 40px;

等同於:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

content

  • content area (例如:文字、圖片 ... 等)
  • content area 的大小是 content width 和 content height
  • 通常有 background-colorbackground-image

資料來源:


上一篇
重新認識 CSS - @import
下一篇
重新認識 CSS - Box model:border
系列文
重新認識 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言